<template>
  <view>
    <!-- 搜索页面 -->
    <!-- 预留出的搜索区域 -->
    <!-- @click只能给原生组件的dom对象注册事件，MySearch是组件不是原生对象
    可以通过子组件派发事件名 @子组件派发的事件名="自己定义的事件名"来完成事件
    还可以用@click.native给组件内部的元素注册事件-->
    <MySearch @click.native="goSearch"></MySearch>
    <view class="scroll-view-container">
      <!-- 左侧的滚动区域 -->
      <scroll-view
        class="left-scroll-view"
        scroll-y
        :style="{ height: wh + 'px' }"
       
      >
        <!-- 每一项 -->
        <!-- 动态设置:class，声明一个selectedCategory:0 让当前下标index与他相等默认第一项高亮，
        再注册点击事件把下标传入与selectedCategory相等就可以动态设置高亮下标 -->
        <view  v-for="(item,index) in categoryList"
        :key="index" class="left-scroll-view-item"
         @click="selectCategoryHandler(index,item)"
         :class="{active:index===selectedCategory}"
         >{{item.cat_name}}</view>
         <!-- 一级标题{{item.cat_name}} -->
      </scroll-view>

      <!-- 右侧的滚动区域 -->
      <scroll-view
      :scroll-top="scrollTop"
        class="right-scroll-view"
        scroll-y
        :style="{ height: wh + 'px' }"
      >
         <!-- 动态渲染二级分类的列表数据 -->
        <view v-for="(item2,index2) in select" :key="index2" class="left-scroll-view-item">
         <!-- 二级标题{{item2.cat_name}} -->
          <view class="cate-lv2-title">/ {{ item2.cat_name }} /</view>
          <view class="cate-lv3-list">
             <!-- 动态渲染三级分类的列表数据 -->
    <view class="cate-lv3-item" @click="gotoProductList(item3)" v-for="(item3, index3) in item2.children" :key="index3">
      <image :src="item3.cat_icon"></image>
       <!-- 三级标题{{item3.cat_name}} -->
      <text>{{ item3.cat_name }}</text>
    </view>
  </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import MySearch from '@/components/my-search.vue'
import badge from '../../mixins/badge';
export default {
  mixins:[badge],
  components:{
    MySearch
  },
  data() {
    return {
      wh: 0,
      categoryList:[],//分类数据数组，核心理解(树形数据：一级内容是左侧标签，二级是标题，三级是图片和产品名字)
      selectedCategory: 0,// 当前选中项的索引，默认让第一项被选中
      select:[],
      scrollTop:0//存放滚动条的 scrollTop 值
    };
  },
  
  created() {
    // 动态获取窗口可用高度，以便让页面中的左右两块滚动区域的高度撑满屏幕
    // 1. 获取当前系统信息
    const sysInfo = uni.getSystemInfoSync();
    
    // 2. 从系统信息中获取窗口可用高度并赋值给 wh
    // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度
    this.wh = sysInfo.windowHeight-50
    // //获取分类数组数据
    this.getcategoryList()
  },
  methods:{
   
    //获取分类数组数据
   async getcategoryList(){
      const {message,meta:{status}}=await this.$http.get('/categories')
      if(status!==200)return this.$showMessage()
      this.categoryList=message
      //默认加载第一页的 children。 获取数据后把二三级分类的数据赋值给select
      //这样select就在一进入页面刷新后得到数据可更新到页面上
      this.select=this.categoryList[0].children
      // if(this.categoryList.length>0){
        // this.select=this.categoryList[0].children||[]
      // }
    },
    //动态切换下标
    selectCategoryHandler(index,item){
      this.selectedCategory=index

      this.select = item.children
      //在切换一级分类时将这个数据值设置为在0和1之间切换（因为值不变的话，不会引起视图更新）
      //这里`scroll-view`组件的`scroll-top`属性是单向数据绑定的, 
      //只能用来设置; 不会在滚动时更新`scrollTop`的值, 所以会引发后续 **数据不变, 视图不更新的问题!!!
      this.scrollTop=this.scrollTop===0? 1:0
    },
    //点击三级分类跳转商品列表
    gotoProductList(item3){
      uni.redirectTo({ url: '/pages_sub1/product-list/product-list?id='+item3.cat_id })
    },
    //跳转搜索
    goSearch(){
      uni.navigateTo({url:'/pages_sub1/search/search'})

    }
  }
}
</script>

<style scoped lang="scss">
.scroll-view-container {
  display: flex;

  .left-scroll-view {
    width: 240rpx;

    .left-scroll-view-item {
      line-height: 120rpx;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 24rpx;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: " ";
          display: block;
          width: 6rpx;
          height: 60rpx;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .cate-lv2-title {
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0;
}
.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;
}
 .cate-lv3-item {
    width: 33.33%;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 120rpx;
      height: 120rpx;
    }

    text {
      font-size: 24rpx;
    }
  }
}

</style>